<template>
  <!-- 标签使用的是小程序的标签 -->
  <view>
    <ugo-search />
    <!-- <view class="m-search">
      <u-search inputAlign="center" :showAction="false" placeholder="搜索" v-model="keyword"></u-search>
 
    </view> -->
    <!-- 轮播图 -->
    <swiper indicator-dots autoplay circular class="m-swiper">
      <swiper-item v-for="item in swiperList" :key="item.goods_id">
        <image :src="item.image_src" mode="scaleToFill" />
      </swiper-item>
    </swiper>
    <!-- 入口导航 -->
    <view class="m-nav">
      <template v-for="item in navList">
        <navigator v-if="item.name === '分类'" url="/pages/category/index" :key="item.name" open-type="switchTab"
          hover-class="none">
          <image :src="item.image_src" mode="widthFix" />
        </navigator>
        <image v-else :key="item.name" :src="item.image_src" mode="widthFix" />
      </template>
    </view>
    <!-- 楼层叠块 -->
    <view class="m-floor">
      <view class="floor" v-for="item in floorList" :key="item.floor_title.name">
      <!-- <view class="floor" v-for="item in floorList" :key="item.floor_title.name"> -->
        <image mode="widthFix" class="title" :src="item.floor_title.image_src">
        </image>
        <view class="product-list">
          <image class="goods" mode="heightFix" v-for="goods in item.product_list" :key="goods.image_src"
            :src="goods.image_src" />
   
        </view>
      </view>
      </view>
    </view>
</template>

<script>
// import MyImage from "@/components/MyImage.vue";
export default {

  data() {
    return {
      // keyword: "",
      // 轮播图列表
      swiperList: [],
      // 入口导航列表
      navList: [],
      // 楼层列表
      floorList: []
    };
  },
  onLoad() {
    //调用轮播图
    this.getSwiperList();
    //调用分类
    this.getNavList();
    this.getFloorList()
  },
  //下拉回调事件
async onPullDownRefresh(){
    //重置数据
    // this.keyword="",
    // this.swiperList=[],
    this.navList=[],
    this.floorList=[]
    //重新获取
  await  Promise.all([this.getSwiperList(),this.getNavList(),this.getFloorList()])
  
    //调用stopPullDownRefresh
    uni.stopPullDownRefresh()
  },
  methods: {
    // 获取轮播图列表
    async getSwiperList() {
      const res = await uni.$u.http.get( "/home/swiperdata");
      // if (!error) {
        this.swiperList = res.data.message;
      // }
    },
    // 获取入口导航列表
    async getNavList() {
      const res= await uni.$u.http.get("/home/catitems");
      this.navList = res.data.message;
      // if (!error) {
      //   this.navList = res.data.message;
      // }
    },
    // 获取楼层列表
    async getFloorList(){
      const res = await uni.$u.http.get('/home//floordata')
      this.floorList = res.data.message
      // if(!error){
      //   this.floorList = res.data.message
      // }
    }
  },
};
</script>

<style>
.m-search {
  padding: 10rpx 25rpx;
  background: #d65056;
}

.m-swiper,
.m-swiper image {
  width: 750rpx;
  height: 340rpx;
}

.m-nav {
  display: flex;
  padding: 12rpx 30rpx;
  justify-content: space-between;
}

.m-nav image {
  width: 128rpx;
}

.m-floor .title {
  margin-top: 43rpx;
  width: 750rpx;
}

.m-floor image{
  height: 188rpx;
  float: left;
  margin-left: 12rpx;
  margin-bottom: 10rpx;
}

.m-floor image:first-child{
  height: 386rpx;
}

.product-list image {
  float: left;
  height: 188rpx;
  margin-left: 12rpx;
  margin-bottom: 10rpx;
}

.product-list image:first-child {
  height: 386rpx;
}
</style>
